import React, { useContext, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  StatusBar,
  ScrollView,
  Alert,
  TouchableOpacity,
} from "react-native";
import ChoiceQues, {
  Question2,
  submitQues2,
} from "../../components/subject/ChoiceQues";
import EssayQues, {
  Question1,
  submitQues1,
} from "../../components/subject/EssayQues";

import { AntDesign } from "@expo/vector-icons";

const QuesType = ({ navigation, route }) => {
  // console.log(isSetting2);

  const { type, isAdd, onDelete, quesIndex, showQues } = route.params;
  const [isSetting, setIsSetting] = useState(false); // 是否正在设置跳过

  // console.log("要编辑的题目啊---", quesIndex, showQues);
  let t_ques = {};
  if (quesIndex == -1) {
    if (type == 2) {
      t_ques = {
        type: type, // 2：单选题
        needAnswer: true,
        title: "",
        optionFlag: [-1, ""],
        answer: 1,
        options: ["", ""],
        // 0：不跳过，1：且跳过，2：或跳过，3：否跳过，4：特殊且跳过(关联题目)，5：小于跳过，6：大于跳过
        visible: true,
        skipType: 0,
        relation: [],
        skipDetail: [
          {
            condition: [],
            skipNumber: [],
          },
        ],
      };
    } else if (type == 3) {
      t_ques = {
        type: type, // 3：多选题
        needAnswer: true,
        title: "",
        options: ["", ""],
        answer: [false, false],
        optionFlag: [-1, ""],
        visible: true,
        skipType: 0,
        relation: [],
        skipDetail: [
          {
            condition: [
              [false, ""],
              [false, ""],
            ],
            skipNumber: [],
          },
        ],
      };
    } else if (type == 1) {
      t_ques = {
        type: type, // 1：问答题
        needAnswer: true,
        title: "",
        answer: "",
        visible: true,
        skipType: 0,
        relation: [],
        skipDetail: [
          {
            condition: "",
            skipNumber: [],
          },
        ],
      };
    } else if (type == 4) {
      t_ques = {
        type: type, // 1：问答题
        needAnswer: true,
        title: "",
        answer: [],
        visible: true,
        skipType: 0,
        relation: [],
        skipDetail: [
          {
            condition: "",
            skipNumber: [],
          },
        ],
      };
    }
  } else {
    t_ques = showQues;
  }

  React.useLayoutEffect(() => {
    if (!isAdd) {
      navigation.setOptions({
        title: "修改题目",
        headerRight: () => (
          <TouchableOpacity
            onPress={() => {
              onConfirmeDeleted();
            }}
          >
            <AntDesign
              name="delete"
              size={20}
              color="#fff"
              style={{ marginRight: 5 }}
            />
          </TouchableOpacity>
        ),
      });
    }
  }, [navigation]);
  const onConfirmeDeleted = () => {
    // setDeletedId(id);
    Alert.alert("提示", "确定删除第" + (quesIndex + 1) + "题吗?", [
      {
        text: "确定",
        onPress: () => {
          // deleteArticle(id);
          // console.log("删除第" + (quesIndex + 1) + "题");
          // .splice
          route.params.onDelete(quesIndex);
          navigation.goBack();
        },
      },
      {
        text: "取消",
      },
    ]);
  };

  // 0 题目组，1：问答题，2：选择题，4：填空题 5:复合题型
  return (
    <View style={styles.container}>
      <View style={!isSetting ? { flex: 14 } : null}>
        {type == 1 || type == 4 ? (
          <EssayQues
            isEdit={quesIndex}
            question={t_ques}
            setIsSkip={(value) => {
              setIsSetting(value);
            }}
          ></EssayQues>
        ) : null}
        {type == 2 || type == 3 ? (
          <ChoiceQues
            isEdit={quesIndex}
            question={t_ques}
            setIsSkip={(value) => {
              setIsSetting(value);
              console.log("---", isSetting);
            }}
          ></ChoiceQues>
        ) : null}
      </View>

      {!isSetting ? (
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            marginLeft: "5%",
            marginRight: "5%",
            marginTop: 20,
            marginBottom: 10,
          }}
        >
          <TouchableOpacity
            style={styles.backBtn}
            onPress={() => {
              navigation.goBack();
            }}
          >
            <Text style={{ color: "#41C3EE" }}>返回</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.submitBtn}
            onPress={() => {
              switch (type) {
                case 1:
                case 4:
                  submitQues1();
                  navigation.goBack();
                  route.params.onSubmit(quesIndex, Question1);
                  break;
                case 2:
                case 3:
                  submitQues2();
                  navigation.goBack();
                  route.params.onSubmit(quesIndex, Question2);
                  break;
              }
            }}
          >
            <Text style={{ color: "#fff" }}>确认</Text>
          </TouchableOpacity>
        </View>
      ) : null}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  backBtn: {
    flex: 3.7,
    borderWidth: 1,
    borderColor: "#41C3EE",
    // alignContent: "center",
    // justifyContent: "center",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  submitBtn: {
    flex: 5.7,
    marginLeft: "6%",
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
});

export default QuesType;
